<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        @enter="handleQuery"
        label-width="65px"
      >
        <el-form-item label="业务系统" prop="businessName">
          <el-select
            v-model="queryParams.businessName"
            filterable
            class="custom-select"
          >
            <el-option label="全部" :value="null"></el-option>
            <el-option
              class="custom-select"
              v-for="item in businessList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictLabel"
            >
              <span class="selectList">
                <common-marquee-text :content="item.dictLabel">
                </common-marquee-text>
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="onlineType">
          <el-select v-model="queryParams.onlineType">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="资产上线" :value="1"></el-option>
            <el-option label="资产下线" :value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="资产名称" prop="interfaceName">
          <common-input
            v-model="queryParams.interfaceName"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="申请时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            @change="dateChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审批结果" prop="result">
          <el-select v-model="queryParams.result">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="待初审" value="待初审"></el-option>
            <el-option label="待复审" value="待复审"></el-option>
            <el-option label="通过" value="通过"></el-option>
            <el-option label="不通过" value="不通过"></el-option>
            <el-option label="已撤销" value="已撤销"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-search>

    <common-table v-loading="loading" slot="content" :data="list">
      <el-table-column
        label="业务系统"
        align="left"
        prop="businessName"
        show-overflow-tooltip
        fixed="left"
      />
      <el-table-column label="类型" align="left" prop="isDefault" width="160">
        <template slot-scope="scope">
          <div v-if="scope.row.onlineType === 1" type="success">资产上线</div>
          <div v-if="scope.row.onlineType === 0" type="warning">资产下线</div>
        </template>
      </el-table-column>
      <el-table-column
        label="资产名称"
        align="left"
        prop="applyName"
        show-overflow-tooltip
      />
      <el-table-column
        label="申请人"
        align="left"
        prop="applicantName"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        label="申请时间"
        align="left"
        prop="createTime"
        width="200"
      />

      <el-table-column
        label="申请理由"
        align="left"
        prop="applyReason"
        show-overflow-tooltip
      />

      <el-table-column
        label="当前环节"
        align="step"
        prop="approver"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{
            scope.row.step === 0
              ? "业务初审"
              : scope.row.step === 1
              ? "安全复审"
              : "已完结"
          }}
        </template>
      </el-table-column>

      <el-table-column label="审批结果" align="left" width="120">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status === 3">已撤销</el-tag>
          <el-tag
            type="warning"
            v-else-if="scope.row.status === 0 && scope.row.step === 0"
            >待初审</el-tag
          >
          <el-tag
            type="warning"
            v-else-if="scope.row.step === 1 && scope.row.status === 1"
            >待复审</el-tag
          >
          <el-tag
            type="danger"
            v-else-if="scope.row.step === 2 && scope.row.status === 2"
            >不通过</el-tag
          >
          <el-tag
            type="success"
            v-else-if="scope.row.step === 2 && scope.row.status === 1"
            >通过</el-tag
          >
          <!-- <el-tag type="success" v-if="scope.row.status === 1">通过</el-tag>

          <el-tag type="danger" v-if="scope.row.status === 2">不通过</el-tag> -->
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" align="left" width="120px">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)"
            >详情
          </el-button>

          <el-button
            type="text"
            @click="handleApproval(scope.row)"
            v-if="scope.row.step === 0"
            v-hasPermi="['apisecurity:apiapply:update']"
            >审批
          </el-button>

          <el-button
            type="text"
            @click="handleApproval(scope.row)"
            v-if="scope.row.step === 1 && scope.row.status === 1"
            v-hasPermi="['apisecurity:apiapply:reExamine']"
            >安全复审
          </el-button>

          <el-button
            type="text"
            @click="handleRevoke(scope.row)"
            v-if="scope.row.status === 0"
            :disabled="scope.row.disabled"
            v-hasPermi="['apisecurity:apiapply:remove']"
            >撤销
          </el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <template v-if="approvalShow">
      <approval
        ref="approval"
        :isDetail="isDetail"
        :info="itemInfo"
        @close="approvalShow = false"
        @refresh="refresh"
      ></approval>
    </template>
  </common-list>
</template>

<script>
import {
  getAssetsReviewList,
  deleteApiExamine,
  deleteCheck,
} from "@/api/apisecurity/assetsReview/assetsReview";
import Approval from "./components/approval.vue";
import BaseList from "@/mixins/BaseList";
import { getBusinessSystemName } from "@/api/system/application/application";
import { reject } from "q";

export default {
  mixins: [BaseList],
  components: {
    Approval,
  },
  data() {
    return {
      ids: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        onlineType: null,
        interfaceName: null,
        beginTime: null,
        endTime: null,
        status: null,
        businessName: null,
        result: null,
      },
      total: 0,
      list: [{}],
      loading: false,
      date: [],
      isDetail: false,
      approvalShow: false,
      itemInfo: null,
      businessList: [],
    };
  },
  created() {
    this.getList();
    this.getBusinessSystemName();
  },
  methods: {
    refresh() {
      this.approvalShow = false;
      this.getList();
    },
    getList() {
      this.loading = true;
      getAssetsReviewList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows.reduce((r, c) => {
              r.push({
                ...c,
                disabled: false,
              });
              return r;
            }, []);
            this.total = res.total;
          } else {
            this.list = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    dateChange() {
      let endTime = null,
        beginTime = null;
      if (this.date && this.date.length > 0) {
        beginTime = this.date[0];
        endTime = this.date[1];
      }
      this.queryParams.beginTime = beginTime;
      this.queryParams.endTime = endTime;
    },

    handleDetail(row) {
      this.isDetail = true;
      this.approvalShow = true;
      this.itemInfo = row;
    },

    handleApproval(row) {
      this.isDetail = false;
      this.approvalShow = true;
      this.itemInfo = row;
    },

    beforeRevoke(row) {
      return new Promise((reslove, reject) => {
        deleteCheck({ id: row.id })
          .then((res) => {
            if (res && res.code === 200) {
              reslove(res);
            } else {
              reject(res);
            }
          })
          .catch((err) => {
            reject(err);
          });
      });
    },

    handleRevoke(row) {
      row.disabled = true;
      this.beforeRevoke(row)
        .then((res) => {
          this.$confirm("是否确认撤销申请?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              deleteApiExamine({ id: row.id, status: 3 })
                .then((res) => {
                  if (res && res.code == 200) {
                    this.$GlobalSuccessMessage("操作成功");
                    this.getList();
                  } else {
                    this.$GlobalErrorConfirm("操作失败", res.msg);
                  }
                })
                .finally(() => {
                  row.disabled = false;
                });
            })
            .catch(() => {
              row.disabled = false;
            });
        })
        .catch((err) => {
          this.$GlobalErrorConfirm("操作失败", err.msg);
        })
        .finally(() => {
          row.disabled = false;
        });
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
      this.date = [];
    },
    getBusinessSystemName() {
      getBusinessSystemName().then((res) => {
        if (res && res.code === 200) {
          this.businessList = res.data;
        } else {
          this.businessList = [];
        }
      });
    },
  },
};
</script>

<style lang="scss"></style>
